<template>
  <div 
  class="checkBox"
  :class="[selected ? 'active' : '']"
  @click="checkBoxChange"
  ></div>
</template>

<script>
export default {
  name: 'checkBox',
  props: {
    selected: Boolean, // 当前选中的状态 true:选中 false 没选中equired: true
  },
  data () {
    return {
    }
  },
  methods: {
    checkBoxChange(e){
      let className = e.target.className;
      this.$emit('checkBoxChange',className === 'checkBox' ? false : true)
    }
  },
}
</script>

<style scoped lang="scss">
  .checkBox{
    width: 40px;
    height: 40px;
    background-image: url(../../../static/images/checkbox.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
  }
  .active{
    background-position: 0 -40px;
  }
</style>
